<template>
    <view class="canvas-wrap"><canvas class="myCanvas" :canvas-id="canvasId" :style="{ width: canvasWidth + 'px', height: canvasHeight + 'px' }" /></view>
</template>
<script>
export default {
    name: '',
    data() {
        return {
            canvasWidth: 0,
            canvasHeight: 0,
            maskImg: '../../static/searchResults/watermark.png',
            canvasId: 'canvasId',
        };
    },
    computed: {},
    mounted() {},
    created() {
        uni.$on('loadBigImage', data => {
            this.gotoPreview(data.image);
        });
    },
    methods: {
        // 预览照片
        gotoPreview(currentImage) {
            if (currentImage.maskImage) {
                this.showBigImage(currentImage.maskImage);
            } else {
                uni.showLoading({
                    title: '图片加载中',
                    mask: true
                });
                this.getImageInfo(currentImage.image_url_c)
                    .then(image => {
                        this.canvasWidth = image.width;
                        this.canvasHeight = image.height;
                        return this.downLoadImage(currentImage.image_url_c);
                    })
                    .then(res => {
                        return this.drawImage(res.tempFilePath, this.canvasId);
                    })
                    .then(res => {
                        return this.getCacheImage(this.canvasWidth, this.canvasHeight, this.canvasId);
                    })
                    .then(res => {
                        uni.hideLoading();
                        currentImage.maskImage = res.tempFilePath;
                        this.showBigImage(currentImage.maskImage);
                    });
            }
        },
        // 获取网络图片的宽高信息
        getImageInfo(path) {
            let promise = new Promise((resolve, reject) => {
                uni.getImageInfo({
                    src: path,
                    success: image => {
                        resolve(image);
                    },
                    fail: res => {
                        reject(res);
                    }
                });
            });
            return promise;
        },
        // 下载网络照片到本地
        downLoadImage(path) {
            let promise = new Promise((resolve, reject) => {
                uni.downloadFile({
                    url: path,
                    success: res => {
                        resolve(res);
                    },
                    fail: res => {
                        reject(res);
                    }
                });
            });
            return promise;
        },
        // 绘制合成图片
        drawImage(path, canvasID) {
            let promise = new Promise((resolve, reject) => {
                const ctx = wx.createCanvasContext(canvasID,this);
                ctx.save();
                ctx.drawImage(path, 0, 0, this.canvasWidth, this.canvasHeight);
                ctx.drawImage(this.maskImg, 0, 0, this.canvasWidth, this.canvasHeight);
                ctx.restore();
                ctx.draw(true, () => {
                    resolve();
                });
            });
            return promise;
        },
        // 将canvas合成照片转为图片
        getCacheImage(width, height, canvasID) {
            let promise = new Promise((resolve, reject) => {
                uni.canvasToTempFilePath({
                    x: 0,
                    y: 0,
                    width: width,
                    height: height,
                    destWidth: width,
                    destHeight: height,
                    canvasId: canvasID,
                    success: res => {
                        resolve(res);
                    },
                    fail: res => {}
                },this);
            });
            return promise;
        },
        // 显示大图
        showBigImage(path) {
            let list = [];
            list.push(path);
            uni.previewImage({
                current: 0,
                urls: list
            });
        }
    },
    components: {}
};
</script>
<style lang="scss" scoped="scoped">
.canvas-wrap {
    position: absolute;
    left: 0;
    top: 0;
    z-index: -100;
    opacity: 0;
    width: 0;
    overflow: hidden;
    .myCanvas {
        position: absolute;
        top: -4000rpx;
        left: 3000rpx;
        z-index: -11;
        opacity: 0;
    }
}
</style>
